import React, { useEffect } from 'react';
import { Input, Row, Col, Radio, Select } from 'antd';
import FormItem from 'src/components/FormItem';
import ScriptEditor from 'src/components/ScriptEditor';

const { Option } = Select;
export default function(props) {
  const { preKey, api_protocol_type = [], api_method_type = [], value = {}, isValidate } = props;

  const { protocol, code, url, method, inputScript, outputScript, status, remark } = value;

  const getFormItems = () =>
    [
      {
        label: {
          label: 'API类型',
          className: 'tantuer-form-item',
        },
        name: preKey + '-' + 'protocol',
        options: {
          initialValue: protocol,
          rules: [{ required: isValidate, message: '请输入数据源名称' }],
        },
        component: (
          <Select disabled={props.actionType === 'detail'}>
            {api_protocol_type.map((it) => {
              return (
                <Option value={it.key} key={it.key}>
                  {it.value}
                </Option>
              );
            })}
          </Select>
        ),
      },
      {
        label: {
          label: 'URL',
          className: 'tantuer-form-item',
        },
        name: preKey + '-' + 'url',
        options: {
          initialValue: url,
          rules: [{ required: isValidate, message: '请输入URL' }],
        },
        component: <Input placeholder='请输入URL' />,
      },
      {
        label: {
          label: '请求类型',
          className: 'tantuer-form-item',
        },
        name: preKey + '-' + 'method',
        options: {
          initialValue: method,
          rules: [{ required: isValidate, message: '请选择请求类型' }],
        },
        component: (
          <Radio.Group disabled={props.actionType === 'detail'}>
            {api_method_type.map((it) => (
              <Radio value={it.key} key={it.key}>
                {it.value}
              </Radio>
            ))}
          </Radio.Group>
        ),
      },
      {
        label: {
          label: '描述',
          className: 'tantuer-form-item',
        },
        name: preKey + '-' + 'remark',
        options: {
          initialValue: remark,
          rules: [{ max: 256, message: '最长256个字符' }],
        },
        component: <Input placeholder='请输入简短描述，限256字' disabled={props.actionType === 'detail'} />,
      },
    ].filter(Boolean);

  const getFormItems2 = () => [
    {
      label: {
        label: '入参配置',
        className: 'tantuer-form-item  tantuer-form-item-nowrap',
      },
      name: preKey + '-' + 'inputScript',
      options: {
        initialValue: inputScript,
        rules: [{ required: isValidate, message: '请输入入参配置' }],
      },
      component: <ScriptEditor disabled={props.actionType === 'detail'} placeholder={''} />,
    },
    {
      label: {
        label: '返回值配置',
        className: 'tantuer-form-item  tantuer-form-item-nowrap',
      },
      name: preKey + '-' + 'outputScript',
      options: {
        initialValue: outputScript,
        rules: [{ required: isValidate, message: '请输入返回值配置' }],
      },
      component: <ScriptEditor disabled={props.actionType === 'detail'} placeholder={''} />,
    },
  ];

  return (
    <Row type='flex' gutter={20}>
      {getFormItems().map((item) => {
        return (
          <Col span={8} key={item.name}>
            <FormItem {...props} form={props.form} item={item} colNum={1} />
          </Col>
        );
      })}
      {getFormItems2().map((item) => {
        return (
          <Col span={24} key={item.name}>
            <FormItem {...props} form={props.form} item={item} colNum={1} />
          </Col>
        );
      })}
    </Row>
  );
}
